<template>
  <div class="index-user-satisfy">
    <div class="index-module-header-mini">
      <div class="index-module-title" style="color:white;">仪表盘</div>
    </div>

    <div ref="chartRefs" class="index-user-satisfy-chart"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, reactive, getCurrentInstance, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

const { proxy } = getCurrentInstance()
const router = useRouter()

const chartRefs = ref(null)
let mapChart = null

let option = {
  // backgroundColor: '#050d19',
  series: [
    {
      center: ['50%', '80%'], //仪表的位置
      name: '刻度', //仪表的名字
      type: 'gauge', //统计图类型为仪表
      radius: '100%', //统计图的半径大小
      min: 0, //最小刻度
      max: 16, //最大刻度
      splitNumber: 5, //刻度数量
      startAngle: 180, //开始刻度的角度
      endAngle: 0, //结束刻度的角度

      axisLine: {
        //设置默认刻度盘上的刻度不显示，重新定义刻度盘
        show: false,
        lineStyle: {
          width: 1,
          color: [[1, 'rgba(255,255,255,0)']]
        }
      }, //仪表盘轴线
      axisLabel: {
        //仪表盘上的数据
        show: false,
        color: '#4d5bd1', //仪表盘上的轴线颜色
        distance: 20, //图形与刻度的间距
        formatter: function (v) {
          //刻度轴上的数据相关显示
          switch (v + '') {
            case '0':
              return '0'
            case '2':
              return '2W'
            case '4':
              return '4W'
            case '6':
              return '6W'
            case '8':
              return '8W'
            case '10':
              return '10W'
            case '12':
              return '12W'
            case '14':
              return '14W'
            case '16':
              return '16W'
          }
        }
      }, //刻度标签。
      axisTick: {
        show: true,
        splitNumber: 5, //刻度的段落数
        lineStyle: {
          color: '#fff',
          width: 1 //刻度的宽度
        },
        length: -8 //刻度的长度
      }, //刻度样式
      splitLine: {
        //文字和刻度的偏移量
        show: true,
        length: -16, //长度
        lineStyle: {
          color: '#D0DEEE',
          width: 1
        }
      } //分隔线样式
    },
    {
      type: 'gauge', //刻度轴表盘
      radius: '100%', //刻度盘的大小
      center: ['50%', '80%'], //刻度盘的位置
      splitNumber: 5, //刻度数量
      startAngle: 180, //开始刻度的角度
      endAngle: 0, //结束刻度的角度

      progress: {
        show: true, //是否显示指针。
        // roundCap: false,//是否在两端显示成圆形。
        overlap: true, //多组数据时进度条是否重叠。
        width: 18,
        clip: true //是否裁掉超出部分
      },
      axisLine: {
        //刻度的线条
        show: true,
        lineStyle: {
          width: 18, //定义一个宽15的数轴
          color: [
            //阴影背景颜色为渐变色
            [
              1,
              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#413e54'
                },
                {
                  offset: 1,
                  color: '#413e54'
                }
              ])
            ]
            // [1, '#413e54']
          ]
        }
      },
      //分隔线样式。
      splitLine: {
        //表盘上的轴线
        //  distance: '-10%', // 负值可以让分割线向内缩进，正值则向外伸出
        show: false,
        lineStyle: {
          width: 1, //定义一个宽15的数轴
          color: '#D0DEEE'
        }
      },
      axisLabel: {
        //表盘上的刻度数值文字
        // inside: true,
        distance: -40,
        show: true,
        color: '#D0DEEE'
        // padding: [-40, -45, 10, -45]
      },
      axisTick: {
        //表盘上的刻度线
        show: false
      },
      pointer: {
        //表盘上的指针
        show: true,
        width: 5,
        itemStyle: {
          color: '#F4B566'
        },
        length: '20%',
        offsetCenter: [0, '-55%']
      },
      itemStyle: {
        //表盘指针的颜色
        // color: '#F4B566',
        borderWidth: 1,
        // 设置渐变色
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#1B7DE3' // 渐变开始
            },
            {
              offset: 1,
              color: '#57F998' // 渐变结束
            }
          ],
          globalCoord: false // 是否全局渐变
        }
      },

      title: {
        //标题
        show: true,
        offsetCenter: [0, 0], // x, y，满意度单位px

        textStyle: {
          color: '#D0DEEE',
          fontSize: 12 //表盘上的标题文字大小
        }
      },
      //仪表盘详情，用于显示数据。
      detail: {
        show: true,
        offsetCenter: [0, '-30%'],
        color: '#fff',
        formatter: '{value}%',
        textStyle: {
          fontSize: 20
        }
      },
      data: [
        //当前数值的数据
        {
          name: '满意度',
          value: 80
        }
      ]
    }
  ]
}

const resizeHandler = () => {
  mapChart.resize()
}
const renderMap = () => {
  if (!mapChart) {
    mapChart = echarts.init(chartRefs.value, null, {
      renderer: 'svg'
    })
  }
  mapChart.dispatchAction({
    type: 'restore'
  })
  mapChart.setOption(option)
  mapChart.dispatchAction({ type: 'dataZoom', start: 0, end: 100 })
}
onMounted(() => {
  renderMap()
  window.addEventListener('resize', resizeHandler)
})
onUnmounted(() => {
  window.removeEventListener('resize', resizeHandler)
})
</script>

<style lang="scss">
.index-user-satisfy {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  background: #1f1b17;

  // background: rgba(98, 81, 55, 0.1);
  .index-user-satisfy-chart {
    width: 100%;
    flex: 1;
    min-height: 0;
    box-sizing: border-box;
    padding: 0 8px;
    // border: 1px solid red;
  }
}
</style>
